/*通用样式*/
:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #606266;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f7f8fa;
	--border-light: #E4E7ED;
	--dark: #121212;
	--grey: #909399;
	--main: #02d5d6;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--border-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1)
}

/*重写样式*/
body {
	font-family: var(--font-family-sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	background: var(--light);
	/* IOS禁止微信调整字体大小 */
	-webkit-text-size-adjust: 100% !important;
	min-width: 1200px;
	word-break: break-all;
}

ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: var(--blue);
}

.e-flex-auto {
	flex: auto;
}

.bold{
	font-weight: bold;
}
// .el-scrollbar__wrap {
//     // overflow-x: auto;
// }

.el-form--label-top .el-form-item__label {
	padding-bottom: 0;
}

.codeImg {
	display: block;
}

.el-date-editor--date.day {
	width: 100%;

	.el-input__inner {
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		height: 100%;
		line-height: initial;
		padding: 0;
	}

	.el-input__icon {
		position: relative;
		top: -6px;
		display: none;
	}
}

// .el-upload--picture-card{
// 	width: 148px;
// 	height: 148px;
// 	line-height: 148px;
// }

.el-table thead .el-table__cell:first-child .el-checkbox {
	margin-left: 4px;
}

.form-bottom-btngroup {
	text-align: center;
	// position: sticky;
	bottom: 0;
	background: #fff;
	// box-shadow: 0 -3px 6px #f1f1f1;
	// padding-top: 30px;
	z-index: 99;
}

// 定义flex等分
@for $i from 0 through 12 {
	.e-flex-#{$i} {
		flex: $i;
	}
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {

	// 只要双数和能被5除尽的数
	@if $i % 2==0 or $i % 5==0 {

		// 得出：e-margin-30或者e-m-30
		.e-margin-#{$i},
		.e-m-#{$i} {
			margin: $i + px !important;
		}

		// 得出：e-padding-30或者e-p-30
		.e-padding-#{$i},
		.e-p-#{$i} {
			padding: $i + px !important;
		}

		@each $short,
		$long in l left,
		t top,
		r right,
		b bottom {

			// 缩写版，结果如： e-m-l-30
			// 定义外边距
			.e-m-#{$short}-#{$i} {
				margin-#{$long}: $i + px !important;
			}

			// 定义内边距
			.e-p-#{$short}-#{$i} {
				padding-#{$long}: $i + px !important;
			}

			// 完整版，结果如：e-margin-left-30
			// 定义外边距
			.e-margin-#{$long}-#{$i} {
				margin-#{$long}: $i + px !important;
			}

			// 定义内边距
			.e-padding-#{$long}-#{$i} {
				padding-#{$long}: $i + px !important;
			}
		}
	}
}

@for $i from 0 through 1000 {
	@if $i % 5==0 {
		.e-w-#{$i} {
			width: $i + px !important;
		}
	}
}

@for $i from 0 through 1000 {
	@if $i % 5==0 {
		.e-h-#{$i} {
			height: $i + px !important;
		}
	}
}

@for $i from 0 through 24 {
	.e-font-#{$i} {
		font-size: $i + px !important;
	}
}


/* 通用样式 */
.container-page {
	margin: 15px;
	// width: 100%;
	border-radius: 5px;
	height: calc(100vh - 136px);
}

.container {
	// margin: 15px;
	background-color: #fff;
	padding: 30px;
	border-radius: 5px;
	min-height: calc(100vh - 136px);
	box-sizing: border-box;
	box-shadow: 0 0 16px 0 rgba(0, 0, 0, .04);
}

.e-h-auto {
	height: auto !important;
}

.e-m-h-auto {
	min-height: auto !important;
}

.el-select {
	width: 100%;
}

.w-100 {
	width: 100% !important;
}

.views-form {
	width: 95%;
	padding-top: 45px;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.flex {
	display: flex;
}

.align-items-center{
	align-items: center;
}

.justify-content-center{
	justify-content: center;
}

.el-textarea__inner {
	font-family: initial;
}

.el-result .el-result__title {
	margin-top: 0;
	margin-bottom: 0;
}

.el-collapse {
	border-top: 0;
}

.border-none {
	border: 0 !important;
}

/*状态颜色*/
.color-primary {
	color: var(--primary);
}

.color-success {
	color: var(--success)
}

.color-info {
	color: var(--info)
}

.color-warning {
	color: var(--warning)
}

.color-danger {
	color: var(--danger)
}

.color-main{
	color: var(--main)
}

/* 页脚 */
.footer {
	color: var(--grey);
	// padding-bottom: 15px;
}

.tips {
	color: var(--grey);
	line-height: 20px;
}

/* 标题通用 */
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.blue-span {
		background-color: var(--blue);
		width: 3px;
		height: 14px;
		display: inline-block;
		margin-right: 15px;
	}
}

/* 列表相关 */
.table-pagination {
	padding: 15px 0;
	text-align: right;
	position: sticky;
	bottom: 0;
	background: #fff;
	z-index: 99;
}

.type-state {
	display: flex;
	width: 100%;
	border-bottom: 2px solid var(--light);
	margin-bottom: 10px;

	span {
		color: var(--gray);
		margin-right: 40px;
		position: relative;
		height: 35px;
		cursor: pointer;

		&.on {
			color: #000;

			&:after {
				content: '';
				width: 100%;
				height: 2px;
				background: var(--main);
				position: absolute;
				bottom: -2px;
				left: 0;
			}
		}
	}
}

/* 详情页相关 */
.descriptions-views {
	margin-top: 45px;
}

/* 编辑器参数 */
.editor-parameter {
	span {
		border: 1px solid var(--light);
		padding: 3px 10px;
		cursor: pointer;

		&:hover {
			background-color: var(--light);
		}
	}
}

/* 步骤组件 */
.el-step__head.is-process {
	color: var(--gray);
	border-color: var(--gray);
}

.el-step__title.is-process {
	color: var(--gray);
}

/* 表单相关 */
.form-textarea {
	height: 150px;
}

.font-ico {
	font-style: initial;
	padding: 0 10px;
}

.pointer {
	cursor: pointer;
}

/*上传单张图片*/
.avatar-uploader {
	.el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		&:hover {
			border-color: var(--main);
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 148px;
			height: 148px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			line-height: initial;
		}
	}

	.avatar {
		width: 148px;
		height: 148px;
		display: block;
	}
}

.card-uploader {
	.el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		&:hover {
			border-color: var(--main);
		}

		.avatar-uploader-icon {
			display: block;
			font-size: 28px;
			color: #8c939d;
			text-align: center;
			width: 256.8px;
			height: 162px;
			line-height: 162px;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 80%;
		}
	}

	.avatar {
		width: 256.8px;
		height: 162px;
		display: block;
	}
}
/*列表页操作按钮间隔竖线*/
.el-button.el-button--text.el-button--small{
	position: relative;
}
.el-button.el-button--text.el-button--small+.el-button.el-button--text.el-button--small:after{
	content: '';
	border-left: 1px solid #dbdbdb;
	position: absolute;
	left: -9px;
    top: 10px;
    height: 10px;
}
/*菜单导航栏选中效果*/
.el-menu-item.is-active{
	background-color: #f5f7fa;
	border-right: 2px solid var(--main);
}
.admin-left-head-nav>.el-menu-item.is-active{
	background-color: #2e2e2e!important;
    color: #fff;
    border-right: 0;
}

/* 更多筛选 */
.other-search-show {
    cursor: pointer;

    &.is-active {
        color: var(--main)
    }

    &.is-active .el-icon-arrow-down {
        transform: rotate(180deg);
    }

    .el-icon-arrow-down {
        transition: all 0.3s;
    }
}

.other-search-form {
    overflow: hidden;
    height: 0;
    transition: all 0.3s;
    border-color: transparent;

    &.is-active {
        height: auto;
        padding: 18px;
        background: var(--light);
        border: 1px solid var(--border-light);
        padding-bottom: 0px;
        margin-bottom: 18px;
        border-radius: 4px;
    }
}

/*修改皮肤主题*/
.skinBox ul {
	display: flex;
	flex-wrap: wrap;
}

.skinBox li {
	margin-bottom: 15px;
	margin-left: 15px;
	height: 68px;
	border-radius: 3px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.skinBox li a {
	width: 90px;
	height: 68px;
	display: inline-block;
}

.skinBox img {
	width: 90px;
	height: 68px;
}

.skinBox span {
	position: absolute;
	left: 0;
	bottom: -20px;
	background: rgba(85, 85, 85, 0.5);
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	z-index: 1;
	transition: all 0.3s ease 0s;
}

.skinBox b {
	display: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -8px;
	box-shadow: 0 0 5px #ddd;
	background: url() no-repeat;
}

.skinBox li.on b {
	display: block;
}

.skinBox li:hover {
	opacity: 0.8;
}

.skinBox li:hover span {
	bottom: 0;
}

.skinBox .blueSkin {
	background-color: var(--blue);
}

.skinBox .orangeSkin {
	background-color: var(--orange);
}

.skinBox .graySkin {
	background-color: var(--gray);
}

.skinBox .pinkSkin {
	background-color: var(--pink);
}

.skinBox .violetSkin {
	background-color: var(--purple);
}

.skinBox .greenSkin {
	background-color: var(--green);
}

.skinBox .yellowSkin {
	background-color: var(--yellow);
}

.skinBox .cyanSkin {
	background-color: var(--cyan);
}

/*自定义步骤条*/
.step-box {
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 61px;
	height: 40px;
	background: #fff;
	z-index: 99;
	border-bottom: 1px solid var(--light);

	.item {
		padding: 0 15px;
		color: var(--grey);
		font-size: 14px;
		font-family: element-icons !important;
		white-space: nowrap;

		&::after {
			content: "\e6e0";
			padding-left: 30px;
		}

		&:last-child:after {
			content: '';
			padding: 0;
		}

		&.on {
			color: var(--blue);

			.num {
				color: #fff;
				background-color: var(--blue);
			}
		}

		.num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			background-color: var(--light);
			color: var(--grey);
			font-size: 12px;
			border-radius: 50%;
			margin-right: 10px;
		}
	}
}

/**/
.files-list {
	display: flex;
	flex-wrap: wrap;

	.item {
		display: flex;
		align-items: center;
		background: #fbfbfb;
		width: 360px;
		height: 35px;
		padding: 10px 15px;
		border-radius: 3px;
		margin-bottom: 15px;
		cursor: pointer;

		&:hover {
			background: var(--light);
		}

		&.upload {
			border: 1px solid var(--main);
			background-color: #f7fbff;
			font-size: 14px;
			background: #ecf5ff;
			border-color: #b3d8ff;
			cursor: pointer;

			&:hover {
				background-color: var(--main);

				.e-flex-1 {
					color: #fff;
				}
			}

			.e-flex-1 {
				color: #409EFF;
				text-align: center;


				&+.e-flex-1 {
					border-left: 1px solid #dcdcdc;
				}

				.el-icon-upload2 {
					font-weight: bold;
				}
			}

			&.el-btn {
				margin-top: 0;
				height: 54px;
				color: #409EFF;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 390px;

				&:hover {
					color: #fff;
				}
			}
		}

		&:first-child {
			margin-right: 15px;
		}

		&+.item {
			margin-right: 15px;
		}

		.icon {
			margin-right: 5px;

			.iconfont {
				font-size: 32px;
				color: var(--main);
			}
		}

		.err {
			color: var(--red);

			&:hover {
				opacity: 0.8;
			}
		}

		.text {
			// padding-right: 30px;
			line-height: 1em;
			width: 70%;
			flex: 1;

			.tl {
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 260px;
			}

			.size {
				color: var(--grey);
				font-size: 12px;
			}
		}
	}
}
.files-list {
	.item {
		.el-icon-view {
			font-size: 20px !important;
		}

		.el-icon-edit-outline {
			font-size: 20px !important;
		}

		.el-icon-error {
			font-size: 20px !important;
		}

		.el-icon-download {
			font-size: 20px !important;
		}

		.icon {
			position: relative;

			.ext {
				font-size: 12px;
				color: #fff;
				position: absolute;
				left: -3px;
				bottom: 6px;
				width: 33px;
				text-align: center;
				transform: scale(0.8);
			}
		}
	}
}

// 地图弹窗
.content-window-card{

    .content-window-head{
      display: flex;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f1f1f1;
    }
}

.el-table__fixed-right::before, .el-table__fixed::before{
	background-color: #fff;
}

.chooseType.el-cascader .el-input .el-input__inner::placeholder{
	color: #606266;
}

// .el-table.el-table--border .el-table__header-wrapper th.el-table__cell{
// 	background-color: var(--light);
// }
.el-table .el-table__header-wrapper th.el-table__cell,.el-table .el-table__fixed-header-wrapper th.el-table__cell{
	background-color: var(--light);
}
